<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <FlowBox v-if="formVisible" ref="FlowBox" @close="closeForm" />
        <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import FlowBox from '../components/FlowBox'
import { checkInfo } from '@/api/workFlow/FlowBefore'
const Base64 = require('js-base64').Base64
export default {
  name: 'workFlowDetail',
  components: { FlowBox },
  data() {
    return {
      formVisible: false,
    }
  },

  computed: {
    config() {
      return this.$route.query.config
    }
  },

  watch: {
    config: {
      deep: true,
      handler(val) {
        this.toDetail()
      },
    },
  },

  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.toDetail()
    },
    toDetail() {
      // type 1-我发起的 2-待办 3-抄送
      if (!this.config) return this.formVisible = false
      const item = JSON.parse(Base64.decode(this.config))
      if (item.viewFlowDetail === 1) { // 业财系统打开此页面查看流程详情
        const data = {
          id: item.processInstanceId,
          processInstanceId: item.processInstanceId,
          opType: item.opType || 4, // 0 - 我发起的详情, 4 - 流程监控
          hasCancel: false,
          readonly: true,
          fromForm: true,
          hideCancelBtn: true,
          hideCommentBtn: true,
        }
        this.formVisible = true;
        this.$nextTick(() => {
          this.$refs.FlowBox.init(data);
        })
        return;
      }

      const data = {
        id: item.processId,
        enCode: item.enCode,
        flowId: item.flowId,
        opType: item.type == 1 ? 0 : item.type == 2 ? 1 : item.type,
        taskNodeId: item.taskNodeId,
        taskId: item.taskOperatorId,
        hideCancelBtn: true,
        fromForm: 1
      }
      if (item.type == 2) {
        checkInfo(item.taskOperatorId).then(res => {
          if (res.data && res.data.isCheck) data.opType = 3
          this.formVisible = true
          this.$nextTick(() => {
            this.$refs.FlowBox.init(data)
          })
        }).catch(() => {
          this.formVisible = false
          this.closeForm()
        })
      } else {
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.FlowBox.init(data)
        })
      }
    },
    closeForm() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.back()
    }
  }
}
</script>